<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	var url = "";
	function newObject() {
		$("#dlg").dialog("open").dialog("setTitle", "Open dialog add new");
		$("#fm").form("clear");
		url = "MonHocServlet?flag=add";
	}

	function editObject() {
		var row = $("#tt").datagrid("getSelected");
		if (row) {
			$("#dlgEdit").dialog("open").dialog("setTitle", "Open dialog edit");
			$("#fmEdit").form("load", row);
			url = "MonHocServlet?flag=edit";
		} else {
			alert("Bạn chưa chọn dữ liệu cần cập nhật！");
		}
	}

	function searchObject() {
		$('#tt').datagrid('load', {
			searchTen : $('#searchTen').val(),
		});
	}

	function removeObject() {
		//var row = $("#tt").datagrid("getSelected");
		var ids = [];
		var rows = $('#tt').datagrid('getSelections');
		for(var i=0; i<rows.length; i++){
			ids.push(rows[i].id_mon_hoc);
		}
		if (rows !="") {
			$.messager.confirm("Confirm", "Bạn muốn xóa mẩu tin này?",
					function(r) {
						if (r) {
							$.post("MonHocServlet?flag=remove", {
								id : ids.join(',')
							}, function(result) {
								if (result.success) {
									$("#tt").datagrid("reload"); // reload the user data
									$.messager.show({
										title : "Delete",
										msg : result.msg
									});
								} else {
									$.messager.show({
										title : "Error !",
										msg : result.msg
									});
								}
							}, "json");
						}
					});
		} else {
			alert("Bạn chưa chọn dữ liệu cần xóa！");
		}
	}

	function saveObject() {
		$("#fm").form("submit", {
			url : url,
			onSubmit : function() {
				return $(this).form("validate");
			},
			success : function(result) {
				var r = eval("(" + result + ")");
				if (r.success) {
					$("#dlg").dialog("close"); // close the dialog
					$("#tt").datagrid("reload"); // reload the user data
					$.messager.show({
						title : "Update",
						msg : r.msg
					});
				} else {
					$.messager.show({
						title : "Error !",
						msg : r.msg
					});
				}
			}
		});
	}
	
	function saveObjectEdit() {
		$("#fmEdit").form("submit", {
			url : url,
			onSubmit : function() {
				return $(this).form("validate");
			},
			success : function(result) {
				var r = eval("(" + result + ")");
				if (r.success) {
					$("#dlgEdit").dialog("close"); // close the dialog
					$("#tt").datagrid("reload"); // reload the user data
					$.messager.show({
						title : "Update",
						msg : r.msg
					});
				} else {
					$.messager.show({
						title : "Error !",
						msg : r.msg
					});
				}
			}
		});
	}

	jQuery(function() {
		$("#searchTen").autocomplete("search/searchMonHoc.jsp");
	});
	
	 $(function(){  
	        $('#id_don_vi_ql').combobox({  
	            onChange:function (newValue, oldValue){  
	                if(newValue !=null){  
	                	$('#tt').datagrid('load', {
	            			id : newValue,
	            		});
	                }  
	            }  
	        });  
	    });

</script>

<script type="text/javascript">
    var xmlHttp=null;
    function getXMLHttpRequest()
    {
    	try
    	{
    		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    	}
    	catch (ex)
    	{
    		try
    		{
    			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//Explorer 6.0+
    		}
    		catch (ex)
    		{
    			try
    			{
    				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//Explorer 5.5+
				} catch (ex) {
					return false;
				}
			}
		}
		return xmlHttp;
	}
	function checkMa(ma) {
		xmlHttp = getXMLHttpRequest();
		var msg = document.getElementById("maMessage");
		if (xmlHttp != null) {
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4) {
					if (xmlHttp.status == 200) {
						var check = xmlHttp.responseText;
						if (check == 0) {
							msg.innerHTML = "";
							document.getElementById("dlg-buttons").style.visibility = "visible";
						} else if (check == 1) {
							msg.innerHTML = "Mã Môn học đã tồn tại";
							document.getElementById("dlg-buttons").style.visibility = "hidden";
						};
					} else {
						msg.innerHTML = "Server đang bận ...";
					}
				} else {
					msg.innerHTML = "Đang kiểm tra ...";
				};
			};
			var url = "view/checkMaMonHoc.jsp?ma=" + ma + "&id=" + Math.random();
			xmlHttp.open("GET", url, true);
			xmlHttp.send(null);
		} else {
			alert("Trình duyệt không hỗ trợ Ajax");
			return false;
		}
	}
</script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 5 0px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 7px;
}

.fitem label {
	display: inline-block;
	width: 90px;
}

.fitem input {
	display: inline-block;
	width: 290px;
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #888888;
	border-radius: 5px 5px 5px 5px;
	color: #222222;
	margin: 0 5px 0 0;
	padding: 3px 3px;
}
</style>
</head>
<body>
	<table id="tt" class="easyui-datagrid"
		style="width: 795px; height: 574px" url="MonHocServlet"
		title=":: MÔN HỌC" toolbar="#tb" rownumbers="true" pagination="true"
		singleSelect="false" fitColumns="true">
		<thead>
			<tr>
				<th field="ck" checkbox="true"></th>
				<th field="ma">Mã</th>
				<th field="ten">Tên Môn Học</th>
				<th field="so_tc">Số TC</th>
				<th field="so_tiet_lt">Số Tiết LT</th>
				<th field="so_tiet_th">Số Tiết TH</th>
				<th field="ten_don_vi">Đơn Vị Quản Lý</th>
			</tr>
		</thead>
	</table>

	<div id="tb" style="padding: 5px">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newObject()">Thêm</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editObject()">Sửa</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeObject()">Xóa</a>
			<a href="ImportMonHoc.jsp" class="easyui-linkbutton" iconCls="icon-excel" plain="true">Excel</a>
		</div>
		<div style="padding: 5px">
		
		<div class="fitem">
				<input id="id_don_vi_ql" name="id_don_vi_ql" class="easyui-combobox" style="width: 320px; height: 25px;"
				 	data-options="
					 			  url:'view/loadDonViTC.jsp',
					              valueField:'id',
					              textField:'ten',
					              panelHeight:'250'
								  "/>
				<a href="#" class="easyui-linkbutton" plain="true">Chọn Đơn Vị</a>
			</div>
		
			<input class="search" id="searchTen" name="searchTen" type="text" placeholder="nhập tên môn học cần tìm"> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-searchs" plain="true" onclick="searchObject()">Tìm Kiếm</a>
		</div>
	</div>
 
 	<!-- -------------------------Add Mon Hoc------------------ -->
	<div id="dlg" class="easyui-dialog"
		style="width: 470px; height: 320px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">MÔN HỌC</div>
		<form id="fm" method="post">
			<div class="fitem">
				<label>Mã:</label> <input type="text" id="ma" name="ma" onblur="checkMa(this.value)"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem" style="margin-left: 95px;">
				<span id="maMessage" style="color: red;"></span>
			</div>
			
			<div class="fitem">
				<label>Tên:</label> <input type="text" name="ten"
					class="easyui-validatebox" required="true">
			</div>

			<div class="fitem">
				<label>Số TC:</label> <input type="text" name="so_tc"
					class="easyui-numberbox" required="true" data-options="min:1">
			</div>

			<div class="fitem">
				<label>Số Tiết LT:</label> <input type="text" name="so_tiet_lt"
					class="easyui-validatebox" required="true">
			</div>

			<div class="fitem">
				<label>Số Tiết TH:</label> <input type="text" name="so_tiet_th"
					class="easyui-numberbox" required="true" data-options="min:0">
			</div>

			<div class="fitem">
				<label>Đơn Vị QL:</label> <input name="id_don_vi_ql"
					class="easyui-combobox" required="true"
					style="width: 298px; height: 25px" url="view/loadDonViTC.jsp"
					valueField="id" textField="ten" panelHeight="250"
					value="ten_don_vi">
			</div>
		</form>
	</div>

	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveObject()">Lưu</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Hủy Bỏ</a>
	</div>
	
	
	<!-- -------------------------Edit Mon Hoc------------------ -->
	<div id="dlgEdit" class="easyui-dialog"
		style="width: 470px; height: 320px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons-edit">
		<div class="ftitle">MÔN HỌC</div>
		<form id="fmEdit" method="post">
			<div class="fitem">
				<input type="hidden" name="id_mon_hoc" class="easyui-validatebox">
			</div>

			<div class="fitem">
				<label>Mã:</label> <input type="text" id="ma" name="ma" readonly="readonly"
					class="easyui-validatebox" required="true">
			</div>
			<div class="fitem" style="margin-left: 95px;">
				<span id="maMessage" style="color: red;"></span>
			</div>
			
			<div class="fitem">
				<label>Tên:</label> <input type="text" name="ten"
					class="easyui-validatebox" required="true">
			</div>

			<div class="fitem">
				<label>Số TC:</label> <input type="text" name="so_tc"
					class="easyui-numberbox" required="true" data-options="min:1">
			</div>

			<div class="fitem">
				<label>Số Tiết LT:</label> <input type="text" name="so_tiet_lt"
					class="easyui-validatebox" required="true">
			</div>

			<div class="fitem">
				<label>Số Tiết TH:</label> <input type="text" name="so_tiet_th"
					class="easyui-numberbox" required="true" data-options="min:0">
			</div>

			<div class="fitem">
				<label>Đơn Vị QL:</label> <input name="id_don_vi_ql"
					class="easyui-combobox" required="true"
					style="width: 298px; height: 25px" url="view/loadDonViTC.jsp"
					valueField="id" textField="ten" panelHeight="250"
					value="ten_don_vi">
			</div>
		</form>
	</div>

	<div id="dlg-buttons-edit">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveObjectEdit()">Lưu</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgEdit').dialog('close')">Hủy Bỏ</a>
	</div>
</body>
</html>